<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<ul>
			<li id = "li1">我是参照标签</li>
		</ul>
		
		<script type="text/javascript">
			    //document.write();不常用，因为容易覆盖原来的页面。
    //innerHTML;用的比较多。绑定属性和内容比较方便。(节点套节点)
    //document.createElement;也是比较多的，指定数量的时候一般用它。
	
		var ul = document.getElementsByTagName("ul")[0];
		var li1 = document.getElementById("li1");
		
		//创建,添加,删除,替换
		var li2 = document.createElement("li");
		li2.innerText = "我是createElement创建的标签，用的是appendChild的方法添加的";
		ul.appendChild(li2);
		//用insertBefore添加
		var li3 = document.createElement("li");
		li3.innerText = "我是createElement创建的标签，用的是insertBefore的方法添加的"
		    //父节点.insertBefore(新节点，参照节点);
		ul.insertBefore(li3,li1);
		//删除,替换
		ul.removeChild(li3);
		//父节点.replaceChild(newNode,oldNode);
		ul.replaceChild(li3,li2);
		
		//克隆node.cloneNode(true);深层复制.
		for(var i = 0;i<=3;i++){
			var newLi = li3.cloneNode(true);
			ul.appendChild(newLi);
		}
		</script>
	</body>
</html>
